/*
 * @Author: your name
 * @Date: 2023-10-11 13:03:45
 * @LastEditTime: 2023-10-20 15:49:15
 * @LastEditors: Please set LastEditors
 * @Descripttion: In User Settings Edit
 * @FilePath: /bicycle-mobile-old/h5/src/pages/search/index.jsx
 */
import React, { useEffect, useState } from 'react'
import styles from './index.less'
import bicycle from '../../assets/search/bicycle.png'
import searchIcon from '../../assets/search/searchIcon.png'
import { useEventTarget } from 'ahooks';
import { E } from '../../../../constants/index'
import { useDispatch, useSelector, useHistory } from 'dva'
import { setSearchTypes, getSearchTypes } from '../../utils/authority'
import { useIntl } from 'umi';
import { getLocale } from 'umi';

function Index() {
  const dispatch = useDispatch()
  const history = useHistory()
  const {
    productPageIndex,
    productList,
    exhibitCategoryList

  } = useSelector(({ index }) => index)
  const [value, { reset, onChange }] = useEventTarget({ initialValue: '' });
  const [selectIndex, setSelectIndex] = useState([]);
  const [selectedExhibitId, setSelectedExhibitId] = useState(0)

  useEffect(() => {
    dispatch({
      type: 'index/apiGetExhibitCategoryList',
      payload: {
        sort: "sequence,DESC",
        type:'EXHIBIT_CATEGORY'

      }
    })
  }, [])
  function handleClickItem(item, index) {
    let selectI = selectIndex.findIndex((vo) => (vo == index))
    if (selectI >= 0) {
      let newData = selectIndex.splice(selectI, 1)
      setSelectIndex([])
      return
    }

    setSelectIndex([index])
    if (selectIndex.indexOf(index) === -1 ) {
      setSelectedExhibitId(item.id)
      history.push({
        pathname: `/searchList/${item.id && item.id || 0}`,
        query: { searchWord: `${value}`}
      })
    } else {
      setSelectedExhibitId(0)
    }
  }

  function handelSearch() {
    setSearchTypes(selectIndex)
    history.push({
      pathname: `/searchList/${selectedExhibitId && selectedExhibitId || 0}`,
      query: { searchWord: `${value}`}
    })
    // history.push(`/searchList/${selectedExhibitId && selectedExhibitId || '0'}?searchWord=wo`)
    // history.push({ pathname: '/searchList/', state: { selectedExhibitId: selectedExhibitId ? selectedExhibitId : '0' }})
  }
  const intl = useIntl();
  return (
    <div className={styles.page}>
      <div className={styles.search}>
        <img className={styles.img} src={bicycle} ></img>
        <div >
          <input onChange={onChange} placeholder={intl.formatMessage({id:"SEARCH_TEXT"})} value={value}></input>
          <img src={searchIcon} onClick={handelSearch}></img>
        </div>
      </div>
      <div className={styles.typeBox}>
        <p>{intl.formatMessage({id:"SCREENING_OF_CLASSIFICATION"})}</p>
        <div className={styles.items}>
          {
            exhibitCategoryList.map((item, index) => {
              let selectStatus = selectIndex.findIndex((vo) => (vo == index))
              return  (getLocale() == "zh-CN" ? item.content : item.contentEn) && <div
                className={`${styles.item} ${selectStatus >= 0 && styles.selectItem}`}
                key={index}
                onClick={() => { handleClickItem(item, index) }}
              >
                {getLocale() == "zh-CN" ? item.content : item.contentEn}
              </div>
            })
          }
        </div>

      </div>
      <div className={styles.buttom} onClick={handelSearch}>
      {intl.formatMessage({id:"CONFIRMATION_SCREEN"})}
      </div>
    </div>
  )
}

export default Index
